<template>
	<view class="content">
		<u-search
			clearabled
			placeholder="请输入您所需要的产品名称"
			v-model="value"
			bg-color="#ECECEC"
			@custom="srchSubmission()"
			@clear="clear()"
		></u-search>
		<view class="shop" v-if="code == 1">
			<view
				v-for="(item, index) in list"
				:key="index"
				style="margin-bottom: 21rpx;"
			>
				<view class="info">
					<view class="top1">
						<view class="left">
							<image
								:src="item.cover"
								v-if="item.cover"
								mode=""
								@click="storeIntroduction(item.id)"
							></image>
						</view>
						<view class="right">
							<view class="right1">
								<view
									class=""
									@click="storeIntroduction(item.id)"
								>
									{{ item.name }}
								</view>
								<image
									src="../../static/zhu111.png"
									mode=""
									@click="getLocationBulletBox(item.id)"
								></image>
							</view>
							<view class="right2">
								<text @click="storeIntroduction(item.id)">
									已售{{ item.sold }}
								</text>
								<text @click="storeIntroduction(item.id)">
									人均￥{{ item.price }}/人
								</text>
								<!-- <text @click="storeIntroduction(item.id)">点评:{{ item.review }}</text> -->
							</view>
							<view class="right3">
								<text @click="storeIntroduction(item.id)">
									{{ item.type }}
								</text>
								<text
									class="text"
									@click="storeIntroduction(item.id)"
								>
									{{ item.site }}
								</text>
								<text @click="storeIntroduction(item.id)">
									{{ item.changdu }}km
								</text>
							</view>
							<view class="right4">
								<text @click="storeIntroduction(item.id)">
									满4免1
								</text>
								<!-- <text @click="huodong()"></text> -->
								<!-- <text @click="confirmBuyOrdr(item.id)">买单</text> -->
							</view>
							<view class="right5">
								<view class="view">
									<text>
										当前为{{ item.num }}/{{ item.full }}单:
									</text>
									<bolck
										v-for="(item2, index2) in item.full + 1"
										:key="index2"
									>
										<image
											src="../../../static/mmm2.png"
											mode=""
											v-if="index2 < item.num"
										></image>
										<image
											src="../../../static/caise2.png"
											mode=""
											v-else-if="
												index2 === item.full &&
													item.num < item.full
											"
										></image>
										<image
											src="../../../static/caise333.png"
											mode=""
											v-else-if="
												index2 === item.full &&
													item.num === item.full
											"
										></image>
										<image
											src="../../../static/mmm1.png"
											mode=""
											v-else
										></image>
									</bolck>
								</view>
								<view class="view1">
									<text @click="confirmBuyOrdr(item.id)">
										买单
									</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 	<view class="button">
						<view class="name">餐厅环境</view>
						<view class="shuxian"></view>
						<view class="showPictures">
							<view
								v-for="(item1, index1) in item.atlas"
								v-if="index1 < 3"
								:key="index1"
							>
								<image :src="item1" mode=""></image>
							</view>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<u-empty
			text="未收录该商品名称"
			mode="list"
			v-else-if="code === 0"
		></u-empty>
		<view class="recentSrch" v-else>
			<text>最近搜索</text>
			<view class="box">
				<view v-for="(item1, index1) in data" :key="index1">
					<text style="margin-bottom: 20rpx;">
						{{ item1.search }}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			value: '',
			uid: 0,
			data: [], // 记录
			list: [],
			code: 2
		};
	},
	methods: {
		//计算赌徒距离
		calculateDistance(lat1, lng1, lat2, lng2) {
			var radLat1 = (lat1 * Math.PI) / 180.0;
			var radLat2 = (lat2 * Math.PI) / 180.0;
			var a = radLat1 - radLat2;
			var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
			var s =
				2 *
				Math.asin(
					Math.sqrt(
						Math.pow(Math.sin(a / 2), 2) +
							Math.cos(radLat1) *
								Math.cos(radLat2) *
								Math.pow(Math.sin(b / 2), 2)
					)
				);
			s = s * 6378.137;
			s = Math.round(s * 10000) / 10000;

			s = s.toFixed(2);
			return s;
		},
		clear() {
			this.code = 2;
		},
		// 确认买单
		confirmBuyOrdr(id) {
			uni.navigateTo({
				url: '../../my/details/details?sid=' + id
			});
		},
		//跳转门店介绍
		storeIntroduction(id) {
			uni.navigateTo({
				url: '../../my/introduction/introduction?id=' + id
			});
		},
		//获取用户最近搜索
		async getRecent() {
			const res = await this.$u.post('api/users/user_search', {
				uid: this.uid
			});
			console.log('res >>  ', res);
			this.data = res.data;
			console.log('this.data :>> ', this.data);
		},
		//搜索提交
		async srchSubmission() {
			const res = await this.$u.post('api/users/user_save_search', {
				uid: this.uid,
				name: this.value
			});
			console.log('res >>  ', res);
			if (res.code === 1) {
				this.code = res.code;
				// uni.$showMsg('获取成功');
				this.list = res.data;
				console.log('res.data :>> ', res.data);
				res.data.forEach((e, index) => {
					try {
						const userLocation = uni.getStorageSync('userLocation');
						if (userLocation) {
							var _this = this;
							var list = userLocation.split(',');
							var longitude1 = list[0];
							var latitude2 = list[1];
							console.log('longitude1 :>> ', longitude1);
							console.log('latitude2 :>> ', latitude2);
							var juli = this.calculateDistance(
								longitude1,
								latitude2,
								e.longitude,
								e.dimension
							);
							console.log('当前的距离>> ', juli);
							_this.list[index].changdu = juli;
						}
					} catch (e) {
						// error
					}
				});
			} else {
				this.code = res.code;
				// uni.$showMsg('未收录该商品名称，请更换关键词');
			}
		}
	},
	onLoad() {
		try {
			const uid = uni.getStorageSync('uid');
			if (uid) {
				this.uid = uid;
				console.log('this.uid :>> ', this.uid);
			}
		} catch (e) {
			// error
		}
		this.getRecent();
	}
};
</script>

<style lang="scss" scoped>
.content {
	padding: 30rpx;
	// /deep/.u-empty  {
	// 	position: absolute;
	// 	top: 0;
	// 	left: 0;
	// 	transform: translate(-50%,-50%);
	// }
	/deep/.u-empty {
		height: 85vh !important;
	}
	.recentSrch {
		margin-top: 30rpx;
		text {
			font-size: 30rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 400;
			color: #333333;
		}
		.box {
			display: flex;
			flex-direction: row;

			justify-content: space-around;
			flex-wrap: wrap;
			align-content: space-around;

			// margin-top: 20rpx;

			text {
				width: 151rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				background: #ececec;
				border-radius: 25rpx 24rpx 25rpx 25rpx;
				display: inline-block;
				font-size: 24rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			// }
		}
	}
	.shop {
		// padding: 0 31rpx 31rpx 31rpx;

		.name {
			height: 34rpx;
			font-size: 36rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 500;
			color: #333333;

			margin-bottom: 20rpx;
		}

		.info {
			width: 690rpx;
			height: 284rpx;
			background: #fff;
			margin-top: 20rpx;
			border-radius: 20rpx;
			padding: 20rpx;

			.top1 {
				display: flex;

				.left {
					width: 201rpx;
					height: 241rpx;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.right {
					width: 430rpx;

					.right1 {
						height: 30rpx;
						line-height: 30rpx;
						display: flex;
						justify-content: space-between;
						margin-bottom: 19rpx;

						view {
							height: 30rpx;
							font-size: 30rpx;
							font-family: 'Microsoft YaHei', PingFang SC;
							font-weight: 500;
							color: #333333;
						}

						image {
							width: 90rpx;
							height: 30rpx;
						}
					}

					.right2 {
						height: 23rpx;
						font-size: 24rpx;
						font-family: 'Microsoft YaHei', PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-bottom: 19rpx;

						display: flex;
						justify-content: space-between;
					}

					.right3 {
						height: 23rpx;
						font-size: 24rpx;
						font-family: 'Microsoft YaHei', PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-bottom: 19rpx;
						display: flex;
						justify-content: space-between;
						margin-bottom: 47rpx;
						.text {
							width: 240rpx;
							text-align: center;
							height: 35rpx;
							white-space: nowrap; /* 规定文本是否折行 */
							overflow: hidden; /* 规定超出内容宽度的元素隐藏 */
							text-overflow: ellipsis;
						}
					}

					.right4 {
						margin-bottom: 11rpx;
						display: flex;
						justify-content: space-between;

						text {
							display: inline-block;
							text-align: center;
							color: #fefefe;
						}

						text:nth-child(1) {
							width: 136rpx;
							height: 40rpx;
							line-height: 40rpx;

							background: linear-gradient(
								90deg,
								#ff6494 0%,
								#ffa86a 100%
							);
							border-radius: 5rpx;
							margin-right: 20rpx;
						}

						// text:nth-child(2) {
						// 	width: 80rpx;
						// 	height: 40rpx;
						// 	line-height: 40rpx;
						// 	background: linear-gradient(
						// 		180deg,
						// 		#ff6494 0%,
						// 		#ffa86a 100%
						// 	);
						// 	border-radius: 5rpx;
						// 	margin-right: 100rpx;
						// }

						text:nth-child(2) {
							width: 85rpx;
							height: 40rpx;
							line-height: 40rpx;
							background: #ff0000;
							border-radius: 20rpx;

							font-size: 24rpx;
							font-family: 'Microsoft YaHei', PingFang SC;
							font-weight: bold;
							color: #fefefe;
						}
					}

					.right5 {
						height: 34rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.view {
							height: 34rpx;
							display: flex;
							align-items: center;
							text {
								height: 34rpx;
								line-height: 34rpx;
								font-size: 20rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #333333;
							}
							image {
								width: 27rpx;
								height: 27rpx;
								margin: 0 7rpx;
							}
						}
						.view1 {
							width: 70rpx;
							height: 40rpx;
							line-height: 40rpx;

							text-align: center;
							background: #ff0000;
							border-radius: 20rpx;

							font-size: 24rpx;
							font-family: 'Microsoft YaHei', PingFang SC;
							font-weight: bold;
							color: #fefefe;
						}
					}
				}
			}

			.button {
				.name {
					width: 118rpx;
					height: 28rpx;
					font-size: 29rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-top: 28rpx;
				}

				.shuxian {
					width: 120rpx;
					height: 8rpx;
					background: linear-gradient(90deg, #ffa73d, #ffdd65);
					border-radius: 4rpx;
					margin-top: 10rpx;
				}

				.showPictures {
					display: flex;
					// justify-content: space-between;
					flex-wrap: wrap;
					margin-top: 10rpx;

					image {
						width: 200rpx;
						height: 200rpx;
						margin-right: 20rpx;
					}
					view:nth-child(3n) {
						image {
							margin-right: 0;
						}
					}
				}
			}
		}
	}
}
</style>
